<script setup lang='ts'>
	import {onReachBottom, onPullDownRefresh} from '@dcloudio/uni-app'
	const imgList = ref([])
	// 切换选项
	const current = ref(0)
	function onClickItem(e) {
		current.value = e.currentIndex
		imgList.value = []
		network()
	}
	const items = ref([
		{key: 'cat', value: '猫'},
		{key: 'dog', value: '狗'},
		{key: 'all', value: '全部'}
	])
	
	const values = computed(() => {
		return items.value.map(item => item.value)
	})
	
	function network() {
		uni.request({
			url: 'https://tea.qingnian8.com/tools/petShow',
			data: {
				size: 10,
				type: items.value[current.value].key
			},
			header: {
				'access-key': 'wangjinfu'
			}
		}).then(res => {
			console.log(res);
			imgList.value = [...imgList.value, ...res.data.data]
		}).finally(() => {
			uni.stopPullDownRefresh()
		})
	}
	
	network()
	// 图片预览
	function previewImage(index) {
		console.log(index);
		const urls: string[] = imgList.value.map(item => item.url)
		uni.previewImage({
			count: index,
			urls
		})
	}
	
	// 触底
	onReachBottom(() => {
		network()
	})
	
	// 刷新生命周期
	onPullDownRefresh(() => {
		imgList.value = []
		// 刷新时，猫狗混合
		current.value = 2
		network()
	})
	// 手动上拉加载
	function refresh() {
		uni.startPullDownRefresh()
	}
	
	function top() {
		uni.pageScrollTo({
			scrollTop: 0,
		})
	}
	
	
</script>


<template>
	<view class="container">
		<view class="menu">
			<uni-segmented-control :current="current" :values="values" @clickItem="onClickItem" styleType="button" activeColor="#4cd964"></uni-segmented-control>
		</view>
		<view class="layout">
			<view class="box" @click="previewImage(index)" v-for="item,index in imgList" :key="item.id">
				<view class="pic">
					<image lazy-load :src="item.url" mode="widthFix"></image>
				</view>
				<view class="text">
					{{item.comment}}
				</view>
			</view>
		</view>
		<view class="float">
			<view class="item" @click="refresh">
				<uni-icons type="refreshempty" size="30"></uni-icons>
			</view>
			<view class="item" @click="top">
				<uni-icons type="arrow-up" size="30"></uni-icons>
			</view>
		</view>
		<view class="loadMore">
			<uni-load-more status="loading"></uni-load-more>
		</view>
	</view>
</template>


<style scoped lang='scss'>
	.container{
		.menu{
			padding:50rpx 50rpx 0;
		}
		
		.layout{
			padding:50rpx;
			.box{
				margin-bottom:60rpx;
				box-shadow: 0 10rpx 40rpx rgba(0,0,0,0.08);
				border-radius: 15rpx;
				overflow: hidden;
				.pic{
					image{
						width: 100%;
					}
				}
				.text{
					padding:30rpx;
					color:#333;
					font-size: 36rpx;
				}
				.author{
					padding:0 30rpx 30rpx;
					text-align: right;
					color:#888;
					font-size: 28rpx;
				}
			}
		}
		
		.loadMore{
			padding-bottom:calc(env(safe-area-inset-bottom) + 50rpx);
		}
		
		
		.float{
			position: fixed;
			right:30rpx;
			bottom:80rpx;
			padding-bottom:env(safe-area-inset-bottom);
			.item{
				width: 90rpx;
				height: 90rpx;
				background: rgba(255,255,255,0.9);
				border-radius: 50%;
				margin-bottom:20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border:1px solid #eee;
			}
			
		}
	}
</style>
